<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码扫码登录</title>
</head>
<body style="margin: 0;padding: 0;width: 100%;height: 100%;position: absolute;">
<!--    <div class="container" style="width: 260px;height: 300px;margin: 0 auto;background-color: #c8d4ff;">-->
<!--    </div>-->

    <div style="width: 260px;position:absolute;height: 300px;margin: auto;left: 0;bottom: 0;right: 0;top: 0;background-color: #c8d4ff;">
        <img id="qrcode"  style="height: 100%;width: 100%;position: absolute;"/>
        <div id="mask" style="position: absolute;width: 100%;height: 100%;display: none;background-color: #272927;text-align: center;">
            <h3 style="position: absolute;top: 0;left: 0;bottom: 0;right: 0;line-height: 13;color: white;z-index: 9999">扫码登录成功</h3>
        </div>
    </div>
</body>
<script type="text/javascript">
    window.onload = function (ev) {
        //发送 post 请求获取二维码资源
        var post = new XMLHttpRequest();
        post.open('post','http://192.168.1.76:8080/qrcode/generator');
        post.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // post.send('name=hanyufang&age=18');
        post.onreadystatechange = function (ev1) {
            if (post.readyState === 4 && post.status === 200){
               console.log(post.response);
                var img = document.getElementById("qrcode");
               var byte = new Uint8Array(post.response);
                var blob = new Blob([byte],{type:'image/png'})
                img.src = URL.createObjectURL(blob);
            }
        };

        //webSocket连接
        var ws = new WebSocket("ws://192.168.1.76:9090/ws");
        ws.onmessage = function(event){
            console.log(event.data.toString());

            if (event.data.indexOf("=") > 0){
                var strings = event.data.split('=');

                if ('channelId' === strings[0]){
                    document.getElementById("qrcode").src
                        = 'http://192.168.1.76:8080/qrcode/generator?channelId=' + strings[1];
                }
                //扫码登录成功
                else if ('loginStatus' === strings[0] && 'success' === strings[1]){
                    document.getElementById("mask").style.display = 'block';
                    document.getElementById("mask").style.opacity =  '0.8';
                }
            }
        };
        ws.onopen = function(event){
            console.log("Netty-WebSocket服务器。。。。。。连接");
        };
        ws.onclose = function(event){
            console.log("Netty-WebSocket服务器。。。。。。关闭");
        };
    }
</script>
</html>